<template>
  <div class="fortune-app">
    <h1>今日运势</h1>
    <div class="fortune-item" v-if="currentFortune">
      <img :src="currentFortune.image" alt="Fortune Image" class="fortune-image" />
      <p class="fortune-text">{{ currentFortune.text }}</p>
      <button @click="toggleFavorite(currentFortune)">
        {{ isFavorite(currentFortune) ? '取消收藏' : '收藏' }}
      </button>
    </div>
    <button @click="getNewFortune">获取新的运势</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 示例运势数据
const fortunes = ref([
  {
    id: 1,
    image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.hDWs7lvRieloefy2stVdsgHaE8?w=290&h=193&c=7&r=0&o=5&pid=1.7',
    text: '今天你的运势相当不错，可能会遇到一些意想不到的好事。'
  },
  {
    id: 2,
    image: 'https://ts1.cn.mm.bing.net/th/id/R-C.383ba1520e531c8b3984cc28fc16aa72?rik=4qNeHoCFBD3aUA&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20108%2f762%2fw1000h562%2f20230120%2f4e23-6134fd2fe0bec7d24a8a3c284e9102f2.jpg&ehk=Q%2fZQ6GruSakmbUL53dQjQxmCVPF7nfFAWPMu9ZDjC5Y%3d&risl=&pid=ImgRaw&r=0',
    text: '运势一般，建议保持低调，避免不必要的冲突。'
  },
  {
    id: 3,
    image: 'https://img95.699pic.com/photo/40094/2695.jpg_wh860.jpg',
    text: '今天是你的幸运日，适合冒险和尝试新事物。'
  },
  {
    id: 4,
    image: 'https://www.huataisui.com/newsimg/439445965x1.jfif',
    text: '霉运已扫除，新年运势正在优化，请转发一键开启好运模式。'
  }
]);

// 当前显示的运势
const currentFortune = ref(null);
const favoriteFortunes = ref([]);

// 初始化当前运势
getNewFortune();

// 获取新的运势
function getNewFortune() {
  const index = Math.floor(Math.random() * fortunes.value.length);
  currentFortune.value = fortunes.value[index];
}

// 收藏或取消收藏运势
function toggleFavorite(fortune) {
  if (isFavorite(fortune)) {
    favoriteFortunes.value = favoriteFortunes.value.filter(f => f.id !== fortune.id);
  } else {
    favoriteFortunes.value.push(fortune);
  }
}

// 检查是否已收藏
function isFavorite(fortune) {
  return favoriteFortunes.value.some(f => f.id === fortune.id);
}
</script>

<style scoped>
.fortune-app {
  text-align: center;
  padding: 20px;
}

.fortune-item {
  margin-bottom: 20px;
}

.fortune-image {
  max-width: 200px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.fortune-text {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

button {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  margin-top: 10px;
}

button:not(.favorite):hover {
  background-color: #45a049;
}

button.favorite {
  background-color: #ffc107;
}

button.favorite:hover {
  background-color: #ffa726;
}
</style>
